<template>
    <div class="rightTopLeft">
        <div class="bg-color-black">
            <div class="cc-header">
                <dv-decoration-1 style="width:200px;height:50px;" />
                <div>横店剧组信息概况</div>
                <dv-decoration-1 style="width:200px;height:50px;" />
            </div>

            <div class="cc-details">
                <div class="item">
                    <div>剧组总数</div>
                    <div class="card">3</div>
                    <div class="card">5</div>
                    <div class="card">1</div>
                </div>
            </div>
            <div class="cc-details2">
                <div class="item">
                    <div>在拍剧组</div>
                    <div class="card">5</div>
                    <div class="card">9</div>
                </div>
                <div class="item">
                    <div>杀青剧组</div>
                    <div class="card">2</div>
                    <div class="card">9</div>
                    <div class="card">2</div>
                </div>
                <div class="item">
                    <div>筹拍剧组</div>
                    <div class="card">6</div>
                    <div class="card">0</div>
                </div>
            </div>

            <div class="cc-main-container">
                <div class="ccmc-left">
                    <div class="station-info">
                        电影<span>1043</span>
                    </div>
                    <div class="station-info">
                        网剧<span>13450</span>
                    </div>
                </div>
                <dv-active-ring-chart :config="config" class="ccmc-middle" />

                <div class="ccmc-right">
                    <div class="station-info">
                        <span>53578</span>电视剧
                    </div>
                    <div class="station-info">
                        <span>2380</span>其他
                    </div>
                </div>

                <label-tag :config="labelConfig" />
            </div>
        </div>
    </div>
</template>

<script>
    import labelTag from './labelTag'
    export default {
        name: "rightTopLeft",
        components: { labelTag },
        data() {
            return {
                config: {
                    data: [
                        {
                            name: '电影',
                            value: 1043
                        },
                        {
                            name: '网剧',
                            value: 13450
                        },
                        {
                            name: '电视剧',
                            value: 53578
                        },
                        {
                            name: '其他',
                            value: 2380
                        }
                    ],
                    color: ['#469f4b', '#3de7c9', '#00baff', '#ffc530'],
                    lineWidth: 30,
                    radius: '55%',
                    activeRadius: '60%'
                },
                labelConfig: {
                    data: ['电影', '网剧', '电视剧', '其他']
                }
            }
        },
        mounted() {
        },
        methods: {}
    }
</script>

<style scoped lang="scss">
.rightTopLeft{
    $box-width: 100%;
    $box-height: 100%;
    padding: 16px;
    height: $box-height;
    min-width: $box-width;
    border-radius: 5px;
    .bg-color-black {
        height: 100%;
        border-radius: 10px;overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .cc-header {
        height: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 30px;
    }
    .cc-details {
        height: 80px;
        display: flex;
        justify-content: center;
        font-size: 26px;
        align-items: center;
        flex-wrap: wrap; align-content: space-between;
        .item {
            display: flex;
            justify-content: center; padding: 0 28px;
            align-items: center;
        }
        .card {
            background-color: rgba(4,49,128,.6);
            color: #08e5ff;
            height: 60px;
            width: 60px;
            font-size: 40px;
            font-weight: bold;
            line-height: 60px; border-radius: 6px;
            text-align: center;
            margin: 10px;
        }
    }
    .cc-details2 {
        height: 50px;
        display: flex;
        justify-content: center;
        font-size: 22px;
        align-items: center;
        flex-wrap: wrap; align-content: space-between;
        .item {
            display: flex;
            justify-content: center; padding: 0 20px;
            align-items: center;
        }
        .card {
            background-color: rgba(4,49,128,.6);
            color: #08e5ff;
            height: 40px;
            width: 40px;
            font-size: 30px;
            font-weight: bold;
            line-height: 40px; border-radius: 6px;
            text-align: center;
            margin: 5px;
        }
    }
    .cc-main-container {
        position: relative;
        flex: 1;
        display: flex;
        .ccmc-middle {
            width: 44%;
            height: 90%;
            .active-ring-name {
                font-size: 20px !important;
            }
        }
        .ccmc-left, .ccmc-right {
            width: 28%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 24px;
            span {
                font-size: 40px;
                font-weight: bold;
            }
            .station-info {
                height: 80px;
                display: flex;
                align-items: center;
            }
        }
        .ccmc-left {
            align-items: flex-end;
            span {
                margin-left: 20px;
            }
        }
        .ccmc-right {
            align-items: flex-start;
            span {
                margin-right: 20px;
            }
        }
    }
    .label-tag {
        position: absolute;
        width: 500px;
        height: 30px;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
    }
}
.center-cmp {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
}
</style>
